<template>
  <div class="footer-to-top">
    <el-row justify="center">
      <el-col :span="12">
        <el-row justify="center" class="top">
          <el-col :span="4" class="footer-back footer-top" @click="handleClick">
            <row align="center">
              <el-icon color="#fff" v-if="!status.open" :size="prop.topSize">
                <ArrowUpBold/>
              </el-icon>
              <el-icon color="#fff" v-else :size="prop.topSize">
                <ArrowDownBold/>
              </el-icon>
            </row>
          </el-col>
        </el-row>
        <el-row id="footer-bottom" justify="center">
          <el-col :style="{'grid-template-columns':prop.data.map(()=>{return '1fr '}).join(' ')}" :span="23"
                  class="footer-back bottom">
            <div v-for="item in prop?.data">
              <i class="mask" @click="item.method()">
                <el-icon color="#fff" :size="prop.bottomSize">
                  <component :is="item.icon"></component>
                </el-icon>
              </i>
              <div>
                <el-text tag="b" style="color: #fff">{{ item.name }}</el-text>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import {Common} from "@/utils/common.ts";
import Row from "@/components/row.vue";
import {ref} from "vue";

export interface FooterData {
  icon: string;
  name: string;
  method: () => void;
}

const prop = withDefaults(defineProps<{
  topSize?: number,
  bottomSize?: number, data?: FooterData[]
}>(), {
  topSize: Common.getViewPointSize(1.5),
  bottomSize: Common.getViewPointSize(2),
})

const status = ref({
  open: false,
})

const handleClick = () => {
  status.value.open = !status.value.open
  if (status.value.open) {
    handleMouseEnter()
  } else {
    handleMouseLeave()
  }
}

const handleMouseEnter = () => {
  let elementById = document.getElementById("footer-bottom");
  elementById.style.height = "auto"
  const {height} = elementById.getBoundingClientRect()
  elementById.style.height = String(0)
  requestAnimationFrame(() => {
    elementById.style.height = height + "px"
  })
  status.value.open = true
}

const handleMouseLeave = () => {
  let elementById = document.getElementById("footer-bottom");
  elementById.style.height = String(0)
  status.value.open = false
}
</script>
<style scoped>
.footer-to-top {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 8px 0 8px;
}

.bottom {
  display: grid;
  padding: 8px 0;
}

.footer-back {
  background-color: rgba(0, 0, 0, .35);
}

#footer-bottom {
  transition: all 0.7s;
  height: 0;
  user-select: none;
}

.mask {
  display: inline-flex;
  padding: 6px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-image: linear-gradient(to bottom, #09ccf5, #1800b0);
  transition: all .7s;
}

.mask:hover {
  box-shadow: 0 0 10px 4px rgb(1 67 247);
  cursor: pointer;
}

.footer-top {
  border-radius: 4px 4px 0 0;
}

.top:hover {
  cursor: pointer;
}
</style>